<template>
    <div class="home-container">
        <div class="home-wrap">
					<v-touch @swipeleft="onSwipeLeft" @swiperight="onSwipeRight" class="wrapper">
						<div style="display: flex; position:relative;">
							<div class="home-left theme-sideBar" :class="toggleFlag?'toggleOpen':'toggleClose'">
									<sliderbar></sliderbar>
							</div>
							<div class="home-right" :class="toggleFlag?'close':'open'">
								<gj-header @changeFlag="changeFlag"></gj-header>
									<transition name="fade-transform" mode="out-in">
											<router-view />
									</transition>
							</div>
						</div>
					</v-touch>
        </div>
    </div>
</template>

<script>
import gjHeader from "@/components/header";
import sliderbar from "@/components/sliderbar";
import md5 from "js-md5";
import { mapGetters } from "vuex";

export default {
    data () {
        return {
					toggleFlag:false,
        };
    },
    computed: {
    },
    components: {
        gjHeader,
        sliderbar
    },
    mounted () {
 
    },
    methods: {
			changeFlag(){
				this.toggleFlag = !this.toggleFlag;
			},
			onSwipeLeft(){
				console.log('left');
				this.toggleFlag = false;
			},
			onSwipeRight(){
				console.log('right');
				this.toggleFlag = true;
			}
    },

    beforeDestroy () {
    }
};
</script>
<style scoped>
.toggleOpen{
	margin-left:0px;
	transition: all .2s linear;
}
.open{
	margin-left:0px;
	transition: all .2s linear;
}
.close{
	margin-left:0px;
	transition: all .2s linear;
}
.toggleClose{
	margin-left:-300px;
	transition: all .2s linear;
}
.home-container {
    height: 100%;
		width:100%;
		overflow:hidden;
}
.home-wrap {
    overflow: hidden;
    height: calc(100%);
    height: -webkit-calc(100%);
		width:2220px;
}
.home-left {
    position: relative;
    z-index: 15;
    width: 300px;
    height: 100%;
    /* background-color: #1DA1F2; */
    overflow-y: auto;
    overflow-x: hidden;
}
.home-right {
    height: 100%;
    width: calc(100% - 300px);
    background-color: #f7f8f9;
}
/* 来电弹框 */
.menu-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    opacity: 0;
    z-index: 999;
    background: transparent;
}
.callConPhone {
    position: fixed;
    top: 10%;
    left: 40%;
    width: 250px;
    opacity: 1;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.phoneGifBox {
    background: #0d151b;
    width: 250px;
    height: 330px;
    border-radius: 10px;
}
.phoneGif {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.comPhoneNum {
    text-align: center;
    color: #fff;
    height: 35px;
    line-height: 35px;
    position: absolute;
    left: 0;
    bottom: 80px;
    width: 100%;
}
.getCallBtn {
    background: #1fcc26;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: absolute;
    left: 100px;
    bottom: 30px;
    text-align: center;
    z-index: 999999;
    font-size: 26px;
    text-indent: -1px;
    line-height: 35px;
}
.phoneGifBtn {
    width: 250px;
    height: 250px;
    border-radius: 10px 10px;
}
.wrapper{
	width:100%;
	height:100%;
	position:relative;
	z-index:9999;
}
</style>

